<template>
  <div class="container">
    <h1>新建房屋</h1>
    <hr style="border: 1px solid rgb(240, 240, 240)" />
    <span>基础信息</span>
    <div class="body">
      <div class="input">
        <div class="input-left">
          <span>楼座</span>
        </div>
        <div class="input-right">
          <el-select v-model="floor" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>单元</span>
        </div>
        <div class="input-right">
          <el-select v-model="unit" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>房间号</span>
        </div>
        <div class="input-right">
          <el-input v-model="room" width="200px" placeholder="请输入" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>房屋用途</span>
        </div>
        <div class="input-right">
          <el-select v-model="room_use" placeholder="请选择">
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>建筑面积</span>
        </div>
        <div class="input-right">
          <el-input v-model="floor_area" type="number" placeholder="请输入" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>公摊面积</span>
        </div>
        <div class="input-right">
          <el-input v-model="shared_area" type="number" placeholder="请输入" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>实用面积</span>
        </div>
        <div class="input-right">
          <el-input v-model="usable_area" type="number" placeholder="请输入" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>房间户型</span>
        </div>
        <div class="input-right">
          <el-input
            v-model="bedroom_num"
            style="width: 60px"
            type="number"
            :min="0"
            :max="99"
            @input="validateRange"
          />
          <span class="p">室</span>
          <el-input
            v-model="living_room_num"
            style="width: 60px"
            type="number"
            :min="0"
            :max="99"
            @input="validateRange"
          />
          <span class="p">厅</span>
          <el-input
            v-model="kitchen_num"
            style="width: 60px"
            type="number"
            :min="0"
            :max="99"
            @input="validateRange"
          />
          <span class="p">厨</span>
          <el-input
            v-model="bathroom_num"
            style="width: 60px"
            type="number"
            :min="0"
            :max="99"
            @input="validateRange"
          />
          <span class="p">卫</span>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>车位号</span>
        </div>
        <div class="input-right">
          <el-input v-model="car_position" placeholder="请输入" />
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>储物室</span>
        </div>
        <div class="input-right">
          <el-select v-model="storage" placeholder="请选择">
            <el-option
              v-for="item in options4"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>房屋状态</span>
        </div>
        <div class="input-right">
          <el-select v-model="room_status" placeholder="请选择">
            <el-option
              v-for="item in options5"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <div class="input">
        <div class="input-left">
          <span>备注</span>
        </div>
        <div class="input-right">
          <el-input v-model="remark" :rows="5" type="textarea" />
        </div>
      </div>
      <div style="margin: 2rem 0 2rem 12rem">
        <el-button type="primary" @click="addOrUpdate">提交</el-button>
        <el-button type="default" @click="to('file/house')">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import to from "@/utils/to.js";
import { useRoute } from "vue-router";
import axios from "axios";
import { ElMessage } from "element-plus";

const route = useRoute();
const id = route.query.id;

const floor = ref("");
const unit = ref("");
const room = ref("");
const room_use = ref("");
const floor_area = ref(0);
const shared_area = ref(0);
const usable_area = ref(0);
const bedroom_num = ref(0);
const living_room_num = ref(0);
const kitchen_num = ref(0);
const bathroom_num = ref(0);
const car_position = ref("");
const storage = ref("");
const room_status = ref("");
const remark = ref("");

const options1 = ref([]);
const options2 = ref([]);

watch(floor, (newFloor) => {
  if (newFloor) {
    console.log(floorData.value);
    const selectedFloor = floorData.value.find(
      (floor) => floor.floorId === newFloor
    );
    console.log(selectedFloor);

    if (selectedFloor) {
      console.log(selectedFloor.unitNum);
      options2.value = Array.from(
        { length: selectedFloor.unitNum },
        (_, index) => ({
          label: `${index + 1}单元`,
          value: `${index + 1}单元`,
        })
      );
    } else {
      options2.value = [];
    }
    console.log(options2.value);
  }
});

const options3 = [
  {
    value: "普通住宅",
    label: "普通住宅",
  },
  {
    value: "商业用地",
    label: "商业用地",
  },
  {
    value: "商住两用",
    label: "商住两用",
  },
  {
    value: "其他",
    label: "其他",
  },
];

const options4 = [
  {
    value: "101",
    label: "101",
  },
  {
    value: "102",
    label: "102",
  },
  {
    value: "103",
    label: "103",
  },
  {
    value: "104",
    label: "104",
  },
  {
    value: "105",
    label: "105",
  },
];

const options5 = [
  {
    value: "闲置",
    label: "闲置",
  },
  {
    value: "自住",
    label: "自住",
  },
  {
    value: "租赁",
    label: "租赁",
  },
  {
    value: "借出",
    label: "借出",
  },
  {
    value: "其他",
    label: "其他",
  },
];

const validateRange = () => {
  if (room_num.value < 0) {
    room_num.value = 0;
  } else if (room_num.value > 99) {
    room_num.value = 99;
  }

  if (living_room_num.value < 0) {
    living_room_num.value = 0;
  } else if (living_room_num.value > 99) {
    living_room_num.value = 99;
  }

  if (bedroom_num.value < 0) {
    bedroom_num.value = 0;
  } else if (bedroom_num.value > 99) {
    bedroom_num.value = 99;
  }

  if (bathroom_num.value < 0) {
    bathroom_num.value = 0;
  } else if (bathroom_num.value > 99) {
    bathroom_num.value = 99;
  }
};

const floorData = ref([]);

const getFloor = () => {
  const config = {
    url: "http://localhost:8080/floor/get",
    method: "GET",
    headers: {
      Authorization: localStorage.getItem("token"),
    },
  };

  const response = axios(config);
  response
    .then((data) => {
      floorData.value = data.data.data;
      options1.value = floorData.value.map((item) => ({
        value: item.name,
        label: item.name,
      }));
      floorData.value = floorData.value.map((item) => ({
        floorId: item.name,
        unitNum: item.unitNum,
      }));
    })
    .catch((error) => {
      console.log(error);
    });
};

const addOrUpdate = () => {
  let config = {};

  if (id === undefined || id === "") {
    config = {
      url: "http://localhost:8080/house/addHouse",
      method: "POST",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      data: {
        floorId: floor.value,
        unit: unit.value,
        houseNum: room.value,
        houseUser: room_use.value,
        buildAreas: floor_area.value,
        publicAreas: shared_area.value,
        relaAreas: usable_area.value,
        bedroomNum: bedroom_num.value,
        livingRoomNum: living_room_num.value,
        kitchenNum: kitchen_num.value,
        bathroomNum: bathroom_num.value,
        parkNum: car_position.value,
        storageId: storage.value,
        status: room_status.value,
        detail: remark.value,
      },
    };
  } else {
    config = {
      url: "http://localhost:8080/house/updateHouse",
      method: "POST",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
      data: {
        id: id,
        floorId: floor.value,
        unit: unit.value,
        houseNum: room.value,
        houseUser: room_use.value,
        buildAreas: floor_area.value,
        publicAreas: shared_area.value,
        relaAreas: usable_area.value,
        bedroomNum: bedroom_num.value,
        livingRoomNum: living_room_num.value,
        kitchenNum: kitchen_num.value,
        bathroomNum: bathroom_num.value,
        parkNum: car_position.value,
        storageId: storage.value,
        status: room_status.value,
        detail: remark.value,
      },
    };
  }

  const response = axios(config);
  response
    .then((data) => {
      console.log(data);
      if (data.data.code === 1) {
        ElMessage({
          message: data.data.msg,
          type: "success",
        });
        setTimeout(() => {
          to("file/house");
        }, 2000);
      }
    })
    .catch((error) => {
      console.log(error);
    });
};

const get = () => {
  const config = {
    url: "http://localhost:8080/house/selectById",
    method: "GET",
    headers: {
      Authorization: localStorage.getItem("token"),
    },
    params: {
      id: id,
    },
  };

  const response = axios(config);
  response
    .then((data) => {
      floor.value = data.data.data.floorId;
      unit.value = data.data.data.unit;
      room.value = data.data.data.houseNum;
      room_use.value = data.data.data.houseUser;
      floor_area.value = data.data.data.buildAreas;
      shared_area.value = data.data.data.publicAreas;
      usable_area.value = data.data.data.relaAreas;
      bedroom_num.value = data.data.data.bedroomNum;
      living_room_num.value = data.data.data.livingRoomNum;
      kitchen_num.value = data.data.data.kitchenNum;
      bathroom_num.value = data.data.data.bathroomNum;
      car_position.value = data.data.data.parkNum;
      storage.value = data.data.data.storageId;
      room_status.value = data.data.data.status;
      remark.value = data.data.data.detail;
    })
    .catch((error) => {
      console.log(error);
    });
};

onMounted(() => {
  get();
  getFloor();
});
</script>

<style scoped>
.container {
  background-color: white;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  padding: 2rem 0 10px 4rem;
}

span {
  display: inline-block;
  font-size: 15px;
  margin: 1rem 2rem 1rem 0;
  line-height: 24px;
  width: 100px;
  text-align: right;
}

.p {
  display: inline-block;
  font-size: 15px;
  margin: 0 8px 0 5px;
  line-height: 24px;
  width: auto;
  text-align: right;
}

.body {
  display: grid;
  justify-content: center;
  align-items: center;
}

.input {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
}

.input-right {
  width: 370px;
}
</style>
